This is an automated email from the ASF dual-hosted git repository. robin0716 pushed a commit to branch feat/1.7.2/ui in repository https://gitbox.apache.org/repos/asf/answer.git
commit ffa8dc2bb85956f07f4d1c20616c1524832f1571 Author: robin <[email protected]> AuthorDate: Wed Dec 17 14:20:09 2025 +0800 feat(editor): update TipTap dependencies and enhance table functionality - Added @tiptap/core version 3.13.0 to package.json and updated related dependencies in pnpm-lock.yaml. - Refactored RichEditor to utilize new table extension with responsive wrapper and improved styling. - Adjusted editor mode initialization in MDEditor to default to 'rich' for enhanced user experience. - Removed redundant styles from index.scss to streamline the editor's appearance. --- ui/package.json | 1 + ui/pnpm-lock.yaml | 193 +++++++++++---------- ui/src/components/Editor/RichEditor.tsx | 23 ++- ui/src/components/Editor/index.scss | 76 -------- ui/src/components/Editor/index.tsx | 4 +- .../Editor/utils/tiptap/tableExtension.ts | 81 +++++++++ 6 files changed, 202 insertions(+), 176 deletions(-) diff --git a/ui/package.json b/ui/package.json index 5a6704ce..a771c39e 100644 --- a/ui/package.json +++ b/ui/package.json @@ -21,6 +21,7 @@ "@codemirror/language-data": "^6.5.0", "@codemirror/state": "^6.5.0", "@codemirror/view": "^6.26.1", + "@tiptap/core": "^3.13.0", "@tiptap/extension-image": "^3.11.1", "@tiptap/extension-placeholder": "^3.11.1", "@tiptap/extension-table": "^3.11.1", diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml index 83c70631..cbbed7e8 100644 --- a/ui/pnpm-lock.yaml +++ b/ui/pnpm-lock.yaml @@ -20,21 +20,24 @@ importers: '@codemirror/view': specifier: ^6.26.1 version: 6.35.3 + '@tiptap/core': + specifier: ^3.13.0 + version: 3.13.0(@tiptap/[email protected]) '@tiptap/extension-image': specifier: ^3.11.1 - version: 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) + version: 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) '@tiptap/extension-placeholder': specifier: ^3.11.1 - version: 3.11.1(@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])) + version: 3.11.1(@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])) '@tiptap/extension-table': specifier: ^3.11.1 - version: 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) + version: 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) '@tiptap/markdown': specifier: ^3.11.1 - version: 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) + version: 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) '@tiptap/react': specifier: ^3.11.1 - version: 3.11.1(@floating-ui/[email protected])(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected]) + version: 3.11.1(@floating-ui/[email protected])(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected]) '@tiptap/starter-kit': specifier: ^3.11.1 version: 3.11.1 @@ -1714,10 +1717,10 @@ packages: peerDependencies: '@testing-library/dom': '>=7.21.4' - '@tiptap/[email protected]': - resolution: {integrity: sha512-q7uzYrCq40JOIi6lceWe2HuA8tSr97iPwP/xtJd0bZjyL1rWhUyqxMb7y+aq4RcELrx/aNRa2JIvLtRRdy02Dg==} + '@tiptap/[email protected]': + resolution: {integrity: sha512-iUelgiTMgPVMpY5ZqASUpk8mC8HuR9FWKaDzK27w9oWip9tuB54Z8mePTxNcQaSPb6ErzEaC8x8egrRt7OsdGQ==} peerDependencies: - '@tiptap/pm': ^3.11.1 + '@tiptap/pm': ^3.13.0 '@tiptap/[email protected]': resolution: {integrity: sha512-c3DN5c/9kl8w1wCcylH9XqW0OyCegqE3EL4rDlVYkyBD0GwCnUS30pN+jdxCUq/tl94lkkRk7XMyEUwzQmG+5g==} @@ -1805,10 +1808,10 @@ packages: '@tiptap/core': ^3.11.1 '@tiptap/pm': ^3.11.1 - '@tiptap/[email protected]': - resolution: {integrity: sha512-KFw3TAwN6hQ+oDeE3lRqwzCRKhxU1NWf9q5SAwiUxlp/LcEjuhXcYJYX8SHPOLOlTo0P42v1i0KBeLUPKnO58g==} + '@tiptap/[email protected]': + resolution: {integrity: sha512-63NbcS/XeQP2jcdDEnEAE3rjJICDj8y1SN1h/MsJmSt1LusnEo8WQ2ub86QELO6XnD3M04V03cY6Knf6I5mTkw==} peerDependencies: - '@tiptap/extension-list': ^3.11.1 + '@tiptap/extension-list': ^3.13.0 '@tiptap/[email protected]': resolution: {integrity: sha512-MpeuVi+bOHulbN65bOjaeoNJstNuAAEPdLwNjW25c9y2a8b5iZFY8vdVNENDiqq+dI+F5EaFGaEq0FN0uslfiA==} @@ -9367,134 +9370,134 @@ snapshots: '@babel/runtime': 7.26.0 '@testing-library/dom': 8.20.1 - '@tiptap/[email protected](@tiptap/[email protected])': + '@tiptap/[email protected](@tiptap/[email protected])': dependencies: '@tiptap/pm': 3.11.1 - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])': dependencies: '@floating-ui/dom': 1.7.4 - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) '@tiptap/pm': 3.11.1 optional: true - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]))': dependencies: - '@tiptap/extension-list': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) + '@tiptap/extension-list': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) '@tiptap/pm': 3.11.1 - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]))': dependencies: - '@tiptap/extensions': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) + '@tiptap/extensions': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) - '@tiptap/[email protected](@floating-ui/[email protected])(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])': + '@tiptap/[email protected](@floating-ui/[email protected])(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])': dependencies: '@floating-ui/dom': 1.7.4 - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) '@tiptap/pm': 3.11.1 optional: true - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]))': dependencies: - '@tiptap/extensions': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) + '@tiptap/extensions': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) '@tiptap/pm': 3.11.1 - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) '@tiptap/pm': 3.11.1 linkifyjs: 4.3.2 - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]))': dependencies: - '@tiptap/extension-list': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) + '@tiptap/extension-list': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]))': dependencies: - '@tiptap/extension-list': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) + '@tiptap/extension-list': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) '@tiptap/pm': 3.11.1 - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]))': dependencies: - '@tiptap/extension-list': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) + '@tiptap/extension-list': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]))': dependencies: - '@tiptap/extensions': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) + '@tiptap/extensions': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) '@tiptap/pm': 3.11.1 - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) '@tiptap/pm': 3.11.1 - '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])': + '@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) '@tiptap/pm': 3.11.1 marked: 15.0.12 @@ -9519,9 +9522,9 @@ snapshots: prosemirror-transform: 1.10.5 prosemirror-view: 1.41.3 - '@tiptap/[email protected](@floating-ui/[email protected])(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])': + '@tiptap/[email protected](@floating-ui/[email protected])(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) '@tiptap/pm': 3.11.1 '@types/react': 18.3.16 '@types/react-dom': 18.3.5(@types/[email protected]) @@ -9531,36 +9534,36 @@ snapshots: react-dom: 18.3.1([email protected]) use-sync-external-store: 1.6.0([email protected]) optionalDependencies: - '@tiptap/extension-bubble-menu': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) - '@tiptap/extension-floating-menu': 3.11.1(@floating-ui/[email protected])(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) + '@tiptap/extension-bubble-menu': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) + '@tiptap/extension-floating-menu': 3.11.1(@floating-ui/[email protected])(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) transitivePeerDependencies: - '@floating-ui/dom' '@tiptap/[email protected]': dependencies: - '@tiptap/core': 3.11.1(@tiptap/[email protected]) - '@tiptap/extension-blockquote': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) - '@tiptap/extension-bold': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) - '@tiptap/extension-bullet-list': 3.11.1(@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])) - '@tiptap/extension-code': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) - '@tiptap/extension-code-block': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) - '@tiptap/extension-document': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) - '@tiptap/extension-dropcursor': 3.11.1(@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])) - '@tiptap/extension-gapcursor': 3.11.1(@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])) - '@tiptap/extension-hard-break': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) - '@tiptap/extension-heading': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) - '@tiptap/extension-horizontal-rule': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) - '@tiptap/extension-italic': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) - '@tiptap/extension-link': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) - '@tiptap/extension-list': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) - '@tiptap/extension-list-item': 3.11.1(@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])) - '@tiptap/extension-list-keymap': 3.11.1(@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])) - '@tiptap/extension-ordered-list': 3.11.1(@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])) - '@tiptap/extension-paragraph': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) - '@tiptap/extension-strike': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) - '@tiptap/extension-text': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) - '@tiptap/extension-underline': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) - '@tiptap/extensions': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) + '@tiptap/core': 3.13.0(@tiptap/[email protected]) + '@tiptap/extension-blockquote': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) + '@tiptap/extension-bold': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) + '@tiptap/extension-bullet-list': 3.11.1(@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])) + '@tiptap/extension-code': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) + '@tiptap/extension-code-block': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) + '@tiptap/extension-document': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) + '@tiptap/extension-dropcursor': 3.11.1(@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])) + '@tiptap/extension-gapcursor': 3.11.1(@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])) + '@tiptap/extension-hard-break': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) + '@tiptap/extension-heading': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) + '@tiptap/extension-horizontal-rule': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) + '@tiptap/extension-italic': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) + '@tiptap/extension-link': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) + '@tiptap/extension-list': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) + '@tiptap/extension-list-item': 3.13.0(@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])) + '@tiptap/extension-list-keymap': 3.11.1(@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])) + '@tiptap/extension-ordered-list': 3.11.1(@tiptap/[email protected](@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])) + '@tiptap/extension-paragraph': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) + '@tiptap/extension-strike': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) + '@tiptap/extension-text': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) + '@tiptap/extension-underline': 3.11.1(@tiptap/[email protected](@tiptap/[email protected])) + '@tiptap/extensions': 3.11.1(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected]) '@tiptap/pm': 3.11.1 '@tootallnate/[email protected]': {} diff --git a/ui/src/components/Editor/RichEditor.tsx b/ui/src/components/Editor/RichEditor.tsx index 916c8249..55fca5a9 100644 --- a/ui/src/components/Editor/RichEditor.tsx +++ b/ui/src/components/Editor/RichEditor.tsx @@ -28,10 +28,11 @@ import StarterKit from '@tiptap/starter-kit'; import Placeholder from '@tiptap/extension-placeholder'; import { Markdown } from '@tiptap/markdown'; import Image from '@tiptap/extension-image'; -import { TableKit } from '@tiptap/extension-table'; +import { TableRow, TableCell, TableHeader } from '@tiptap/extension-table'; import { Editor, BaseEditorProps } from './types'; import { createTipTapAdapter } from './utils/tiptap/adapter'; +import { TableWithWrapper } from './utils/tiptap/tableExtension'; interface RichEditorProps extends BaseEditorProps {} @@ -117,7 +118,23 @@ const RichEditor: React.FC<RichEditorProps> = ({ StarterKit, Markdown, Image, - TableKit, + TableWithWrapper.configure({ + HTMLAttributes: { + class: 'table table-bordered', + style: { + width: '100%', + }, + }, + resizable: true, + wrapperClass: 'table-responsive', + }), + TableRow.configure({ + HTMLAttributes: { + class: 'table-row', + }, + }), + TableCell, + TableHeader, Placeholder.configure({ placeholder, }), @@ -128,7 +145,7 @@ const RichEditor: React.FC<RichEditorProps> = ({ onBlur: handleBlur, editorProps: { attributes: { - class: 'tiptap-editor', + class: 'tiptap-editor fmt', }, }, }); diff --git a/ui/src/components/Editor/index.scss b/ui/src/components/Editor/index.scss index 4775e84a..60a549aa 100644 --- a/ui/src/components/Editor/index.scss +++ b/ui/src/components/Editor/index.scss @@ -139,82 +139,6 @@ height: 0; } } - - h1, - h2, - h3, - h4, - h5, - h6 { - margin: 1rem 0 0.5rem; - font-weight: 600; - line-height: 1.4; - } - - ul, - ol { - padding-left: 1.5rem; - margin: 0.5rem 0; - } - - li { - margin: 0.25rem 0; - } - - code { - background-color: var(--an-code-bg, #f4f4f4); - color: var(--an-code-color, #e83e8c); - padding: 0.2em 0.4em; - border-radius: 3px; - font-size: 0.9em; - } - - pre { - background-color: var(--an-code-block-bg, #f8f9fa); - border: 1px solid var(--an-ced4da); - border-radius: 4px; - padding: 1rem; - margin: 0.5rem 0; - overflow-x: auto; - - code { - background-color: transparent; - color: inherit; - padding: 0; - } - } - - blockquote { - border-left: 4px solid var(--an-primary, #0d6efd); - padding-left: 1rem; - margin: 0.5rem 0; - color: var(--an-text-secondary, #6c757d); - } - - a { - color: var(--an-link-color, #0d6efd); - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } - - img { - max-width: 100%; - height: auto; - border-radius: 4px; - } - - hr { - border: none; - border-top: 1px solid var(--an-ced4da); - margin: 1rem 0; - } - - ::selection { - background-color: var(--an-selection-bg, rgba(0, 123, 255, 0.2)); - } } .editor-loading { diff --git a/ui/src/components/Editor/index.tsx b/ui/src/components/Editor/index.tsx index eb798c9d..91214ac3 100644 --- a/ui/src/components/Editor/index.tsx +++ b/ui/src/components/Editor/index.tsx @@ -86,7 +86,7 @@ const MDEditor: ForwardRefRenderFunction<EditorRef, Props> = ( }, ref, ) => { - const [mode, setMode] = useState<'markdown' | 'rich'>('markdown'); + const [mode, setMode] = useState<'markdown' | 'rich'>('rich'); const [currentEditor, setCurrentEditor] = useState<Editor | null>(null); const previewRef = useRef<{ getHtml; element } | null>(null); @@ -186,7 +186,7 @@ const MDEditor: ForwardRefRenderFunction<EditorRef, Props> = ( }} /> </div> - <Viewer ref={previewRef} value={value} /> + {mode === 'markdown' && <Viewer ref={previewRef} value={value} />} </> ); }; diff --git a/ui/src/components/Editor/utils/tiptap/tableExtension.ts b/ui/src/components/Editor/utils/tiptap/tableExtension.ts new file mode 100644 index 00000000..70e68f77 --- /dev/null +++ b/ui/src/components/Editor/utils/tiptap/tableExtension.ts @@ -0,0 +1,81 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache 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 + * + * http://www.apache.org/licenses/LICENSE-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. + */ + +import { Table, TableOptions } from '@tiptap/extension-table'; +import type { NodeViewRendererProps } from '@tiptap/core'; + +interface TableWrapperOptions extends TableOptions { + wrapperClass?: string; +} + +export const TableWithWrapper = Table.extend<TableWrapperOptions>({ + addOptions() { + const parentOptions = (this.parent?.() || {}) as Partial<TableOptions>; + return { + ...parentOptions, + HTMLAttributes: parentOptions.HTMLAttributes || {}, + wrapperClass: 'table-responsive', + } as TableWrapperOptions; + }, + + addNodeView() { + return (props: NodeViewRendererProps) => { + const { node } = props; + const wrapperClass = this.options.wrapperClass || 'table-responsive'; + + const dom = document.createElement('div'); + dom.className = wrapperClass; + + const table = document.createElement('table'); + + const htmlAttrs = this.options.HTMLAttributes || {}; + if (htmlAttrs.class) { + table.className = htmlAttrs.class as string; + } + if (htmlAttrs.style && typeof htmlAttrs.style === 'object') { + Object.assign(table.style, htmlAttrs.style); + } + + const colgroup = document.createElement('colgroup'); + if (node.firstChild) { + const { childCount } = node.firstChild; + for (let i = 0; i < childCount; i += 1) { + const col = document.createElement('col'); + colgroup.appendChild(col); + } + } + table.appendChild(colgroup); + + const tbody = document.createElement('tbody'); + table.appendChild(tbody); + dom.appendChild(table); + + return { + dom, + contentDOM: tbody, + update: (updatedNode) => { + if (updatedNode.type !== node.type) { + return false; + } + return true; + }, + }; + }; + }, +});
