-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: replace ckeditor with tiptap editor
- Loading branch information
1 parent
b42e0fe
commit 8da48eb
Showing
67 changed files
with
4,650 additions
and
503 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| { | ||
| "extends": "@strapi/typescript-utils/tsconfigs/admin", | ||
| "include": ["../plugins/**/admin/src/**/*", "./"], | ||
| "include": ["../../../../packages/**/**/admin/src/**/*", "./"], | ||
| "exclude": ["node_modules/", "build/", "dist/", "**/*.test.ts"] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,7 @@ | ||
| 'use strict'; | ||
| module.exports = (config, _webpack) => { | ||
| module.exports = (config, webpack) => { | ||
| config.plugins.push( | ||
| new webpack.NormalModuleReplacementPlugin(/^tippy\.js$/, 'tippy.js/dist/tippy-bundle.umd.min.js'), | ||
| ); | ||
| return config; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| dev/ |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| # Strapi TipTap Editor |
28 changes: 28 additions & 0 deletions
28
packages/strapi-tiptap-editor/admin/src/components/Editor/BubbleMenuComponent.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { Flex } from '@strapi/design-system/Flex'; | ||
| import { BubbleMenu } from '@tiptap/react'; | ||
| import React from 'react'; | ||
| import { TableMenuBar } from './TableMenuBar'; | ||
|
|
||
| // Floating bubble menu for table | ||
| export function BubbleMenuComponent({ editor }) { | ||
| if (editor) { | ||
| let menuBars = []; | ||
|
|
||
| if (editor.isActive('table')) { | ||
| menuBars.push(TableMenuBar(editor)); | ||
| } | ||
|
|
||
| return ( | ||
| <BubbleMenu editor={editor} tippyOptions={{ zIndex: 2, maxWidth: '550px' }}> | ||
| {menuBars.length ? ( | ||
| <Flex padding={2} className="menu-bar floating" style={{ flexWrap: 'wrap' }}> | ||
| {/* Render menu bars */} | ||
| {menuBars} | ||
| </Flex> | ||
| ) : null} | ||
| </BubbleMenu> | ||
| ); | ||
| } | ||
|
|
||
| return null; | ||
| } |
32 changes: 32 additions & 0 deletions
32
packages/strapi-tiptap-editor/admin/src/components/Editor/PriceList.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { Option, Select } from '@strapi/design-system/Select'; | ||
| import React from 'react'; | ||
| import { formatCurrency } from '../../utils/formateCurrency'; | ||
|
|
||
| export function PriceList({ editor, productPrice }) { | ||
| if (productPrice && productPrice.price && productPrice.price.length === 0) { | ||
| return null; | ||
| } | ||
| const title = `${productPrice?.title} price`; | ||
|
|
||
| return ( | ||
| <Select | ||
| required | ||
| size="S" | ||
| placeholder="Select Price" | ||
| onChange={(event) => { | ||
| const price = productPrice.price?.find(({ id }) => id === event); | ||
|
|
||
| if (price && editor) { | ||
| editor.chain().focus().insertReactComponent(price).run(); | ||
| } | ||
| }} | ||
| > | ||
| {title && <Option value="price">{title}</Option>} | ||
| {productPrice?.price?.map((price) => ( | ||
| <Option key={price.id} className="icon" value={price.id.toString()}> | ||
| {`${price.label}: ${formatCurrency(price)}`} | ||
| </Option> | ||
| ))} | ||
| </Select> | ||
| ); | ||
| } |
121 changes: 121 additions & 0 deletions
121
packages/strapi-tiptap-editor/admin/src/components/Editor/TableMenuBar.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| import { | ||
| Button, | ||
| Dialog, | ||
| DialogBody, | ||
| DialogFooter, | ||
| Flex, | ||
| IconButton, | ||
| IconButtonGroup, | ||
| Typography, | ||
| } from '@strapi/design-system'; | ||
| import { Grid, GridItem } from '@strapi/design-system/Grid'; | ||
| import { Option, Select } from '@strapi/design-system/Select'; | ||
| import React, { Fragment, useState } from 'react'; | ||
| import { AiOutlineDelete } from 'react-icons/ai'; | ||
| import { ImWarning } from 'react-icons/im'; | ||
| import { RiInsertRowBottom, RiLayoutColumnLine, RiMergeCellsHorizontal, RiToggleLine } from 'react-icons/ri'; | ||
|
|
||
| export function TableMenuBar(editor) { | ||
| const [isVisibleDeleteTable, setIsVisibleDeleteTable] = useState({ visible: false, type: '' }); | ||
|
|
||
| const onTableMenubarChange = (event) => { | ||
| editor.chain().focus()[`${event}`]().run(); | ||
| }; | ||
|
|
||
| return ( | ||
| <Fragment key="tableMenubar"> | ||
| <Grid gap={2}> | ||
| <GridItem col={3}> | ||
| <Select onChange={onTableMenubarChange} startIcon={<RiInsertRowBottom color="black" />} label="Table Row"> | ||
| <Option value="addRowAfter">Insert row below</Option> | ||
| <Option value="addRowBefore">Insert row above</Option> | ||
| <Option value="deleteRow">Delete row</Option> | ||
| </Select> | ||
| </GridItem> | ||
| <GridItem col={3}> | ||
| <Select onChange={onTableMenubarChange} startIcon={<RiLayoutColumnLine color="black" />} label="Table Column"> | ||
| <Option value="addColumnAfter">Insert column after</Option> | ||
| <Option value="addColumnBefore">Insert column before</Option> | ||
| <Option value="deleteColumn">Delete column</Option> | ||
| </Select> | ||
| </GridItem> | ||
| <GridItem col={3}> | ||
| <Select onChange={onTableMenubarChange} startIcon={<RiToggleLine color="black" />} label="Toggle header"> | ||
| <Option value="toggleHeaderRow">Toggle header row</Option> | ||
| <Option value="toggleHeaderColumn">Toggle header column</Option> | ||
| <Option value="toggleHeaderCell">Toggle header cell</Option> | ||
| </Select> | ||
| </GridItem> | ||
| <GridItem col={3}> | ||
| <Select | ||
| onChange={onTableMenubarChange} | ||
| startIcon={<RiMergeCellsHorizontal color="black" />} | ||
| label="Table cell" | ||
| > | ||
| <Option value="mergeCells">Merge cells</Option> | ||
| <Option value="splitCell">Split cell</Option> | ||
| <Option value="mergeOrSplit">Merge or split cell</Option> | ||
| </Select> | ||
| </GridItem> | ||
| </Grid> | ||
| <Grid> | ||
| <IconButtonGroup className="button-group"> | ||
| <IconButton | ||
| icon={<AiOutlineDelete />} | ||
| label={editor.can().deleteNode('capturedTable') ? 'Delete table with caption' : 'Delete table'} | ||
| onClick={() => | ||
| setIsVisibleDeleteTable({ | ||
| visible: true, | ||
| type: editor.can().deleteNode('capturedTable') ? 'capturedTable' : 'table', | ||
| }) | ||
| } | ||
| /> | ||
| </IconButtonGroup> | ||
| </Grid> | ||
| <Dialog | ||
| onClose={() => setIsVisibleDeleteTable({ visible: false, type: '' })} | ||
| title="Confirmation" | ||
| isOpen={isVisibleDeleteTable.visible} | ||
| > | ||
| <DialogBody icon={<ImWarning />}> | ||
| <Flex direction="column" alignItems="center" gap={2}> | ||
| <Flex justifyContent="center"> | ||
| <Typography id="confirm-description">{`Are you sure you want to delete the ${ | ||
| isVisibleDeleteTable.type === 'capturedTable' ? 'table with caption' : 'table' | ||
| }?`}</Typography> | ||
| </Flex> | ||
| </Flex> | ||
| </DialogBody> | ||
| <DialogFooter | ||
| startAction={ | ||
| <Button onClick={() => setIsVisibleDeleteTable({ visible: false, type: '' })} variant="tertiary"> | ||
| Cancel | ||
| </Button> | ||
| } | ||
| endAction={ | ||
| <Button | ||
| variant="danger-light" | ||
| startIcon={<AiOutlineDelete />} | ||
| onClick={() => { | ||
| switch (isVisibleDeleteTable.type) { | ||
| case 'table': | ||
| editor.chain().focus().deleteTable().run(); | ||
| break; | ||
|
|
||
| case 'capturedTable': | ||
| editor.chain().focus().deleteNode('capturedTable').run(); | ||
| break; | ||
|
|
||
| default: | ||
| break; | ||
| } | ||
| }} | ||
| > | ||
| Confirm | ||
| </Button> | ||
| } | ||
| /> | ||
| </Dialog> | ||
| </Fragment> | ||
| ); | ||
| } |
Oops, something went wrong.