Skip to content

Commit

Permalink
Merge branch 'release/1.1.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
@hiukky
hiukky committed Mar 22, 2022
2 parents edc815f + fdea979 commit 97ef47d
Show file tree
Hide file tree
Showing 10 changed files with 312 additions and 268 deletions.
36 changes: 19 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,23 +109,25 @@ const App: React.FC = () => {

<br>

| Property | Type | Description |
| ----------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| id | string | Specifies a unique id for an HTML element. |
| value | string | Can be plain text or html. |
| spellCheck | boolean | Spell check. |
| editable | boolean | Enable editing when focusing on component |
| className | string | CSS class for styling. By default no styles are defined for the component, only resets basic settings. |
| placeholder | string | A small tip, phrase, word, which is intended to help the user understand how to fill out that form. |
| autoFocus | boolean | If enabled, the element receives focus automatically when displayed. |
| placement | string | Editable content centering, the accepted values are: `topStart`, `topCenter`, `topEnd`, `middleStart`, `middleCenter`,`middleEnd`,`bottomStart`,`bottomCenter` and `bottomEnd`. |
| onKeyUp | Maybe[T] | The keyup event fires when a key is released. |
| onKeyDown | Maybe[T] | The keydown event is fired when a key is pressed. |
| onKeyPress | Maybe[T] | The onkeypress event occurs when the user presses a key. |
| onBlur | Maybe[T] | The onblur event occurs when an object loses focus. |
| onFocus | Maybe[T] | The onfocus event occurs when an element gets focus. |
| onChange | Maybe[T] | The onchange event occurs when the value of an element has been changed. |
| onPaste | Maybe[T] | The onpaste event occurs when the user pastes some content in an element. |
| Property | Type | Description |
| ----------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| id | string | Specifies a unique id for an HTML element. |
| value | string | Can be plain text or html. |
| spellCheck | boolean | Spell check. |
| editable | boolean | Enable editing when focusing on component |
| multiLine | boolean | When true allows line wrapping. |
| style | React.CSSProperties | Custom styles. |
| className | string | CSS class for styling. By default no styles are defined for the component, only resets basic settings. |
| placeholder | string | A small tip, phrase, word, which is intended to help the user understand how to fill out that form. |
| autoFocus | boolean | If enabled, the element receives focus automatically when displayed. |
| placement | string | Editable content centering, the accepted values are: `topStart`, `topCenter`, `topEnd`, `middleStart`, `middleCenter`,`middleEnd`,`bottomStart`,`bottomCenter` and `bottomEnd`. |
| onKeyUp | Maybe[T] | The keyup event fires when a key is released. |
| onKeyDown | Maybe[T] | The keydown event is fired when a key is pressed. |
| onKeyPress | Maybe[T] | The onkeypress event occurs when the user presses a key. |
| onBlur | Maybe[T] | The onblur event occurs when an object loses focus. |
| onFocus | Maybe[T] | The onfocus event occurs when an element gets focus. |
| onChange | Maybe[T] | The onchange event occurs when the value of an element has been changed. |
| onPaste | Maybe[T] | The onpaste event occurs when the user pastes some content in an element. |

<br>

Expand Down
32 changes: 17 additions & 15 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "cedit",
"version": "1.0.4",
"version": "1.1.0",
"repository": "git@github.com:hiukky/cedit.git",
"author": "Romullo <developermarsh@gmail.com>",
"description": "📝 A simple way to edit content in react.",
Expand All @@ -22,7 +22,7 @@
"lint": "eslint . --ext .ts,.tsx --fix"
},
"devDependencies": {
"@commitlint/cli": "^16.2.1",
"@commitlint/cli": "^16.2.3",
"@commitlint/config-conventional": "^16.2.1",
"@storybook/addon-actions": "^6.4.19",
"@storybook/addon-essentials": "^6.4.19",
Expand All @@ -31,32 +31,32 @@
"@storybook/addon-links": "^6.4.19",
"@storybook/react": "^6.4.19",
"@storybook/testing-library": "^0.0.9",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^12.1.4",
"@types/jest": "^27.4.1",
"@types/react": "^17.0.39",
"@types/react": "^17.0.41",
"@types/styled-components": "^5.1.24",
"@typescript-eslint/eslint-plugin": "^5.13.0",
"@typescript-eslint/parser": "^5.13.0",
"@typescript-eslint/eslint-plugin": "^5.16.0",
"@typescript-eslint/parser": "^5.16.0",
"add": "^2.0.6",
"autoprefixer": "^10.4.2",
"esbuild": "^0.14.25",
"eslint": "^8.10.0",
"autoprefixer": "^10.4.4",
"esbuild": "^0.14.27",
"eslint": "^8.11.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^16.1.0",
"eslint-config-airbnb-typescript": "^16.1.4",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.29.3",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.3.0",
"gh-pages": "^3.2.3",
"husky": "^7.0.4",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.5.1",
"postcss": "^8.4.7",
"postcss": "^8.4.12",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"rimraf": "^3.0.2",
"rollup": "^2.69.2",
"rollup": "^2.70.1",
"rollup-plugin-dts": "^4.2.0",
"rollup-plugin-esbuild": "^4.8.2",
"rollup-plugin-filesize": "^9.1.2",
Expand All @@ -65,7 +65,7 @@
"styled-components": "^5.3.3",
"ts-jest": "^27.1.3",
"typescript": "^4.6.2",
"yarn": "^1.22.17"
"yarn": "^1.22.18"
},
"peerDependencies": {
"react": "^17.0.2",
Expand All @@ -83,6 +83,8 @@
"editable",
"contenteditable",
"content editable",
"react-hooks"
"react-hooks",
"react-contenteditable",
"react-content-editable"
]
}
4 changes: 3 additions & 1 deletion src/cedit.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,9 @@ const Template: Story<CeditProps> = args => {
<Preview>
{['text', 'html'].map((type, idx) => (
<div key={type}>
<span>Preview ({type.toUpperCase()})</span>
<span>
Preview ({type.toUpperCase()} {!!idx && 'Readonly'})
</span>
<Cedit
placeholder="Preview"
value={value[type as keyof typeof value]}
Expand Down
4 changes: 3 additions & 1 deletion src/cedit.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { render } from '@testing-library/react'
import { render, cleanup } from '@testing-library/react'

import { Cedit } from './cedit'

Expand Down Expand Up @@ -36,3 +36,5 @@ describe('Cedit', () => {
`)
})
})

afterEach(cleanup)
11 changes: 10 additions & 1 deletion src/cedit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,13 @@ export const Cedit: React.FC<CeditProps> = ({
id,
value,
editable = true,
multiLine = true,
spellCheck = false,
className = '',
placeholder,
autoFocus = false,
placement = 'topStart',
style = {},
onChange = () => ({}),
onFocus = () => ({}),
onBlur = () => ({}),
Expand Down Expand Up @@ -49,6 +51,7 @@ export const Cedit: React.FC<CeditProps> = ({
role="presentation"
className={`cedit ${PLACEMENT[placement]} ${className}`.trim()}
style={{
...style,
cursor: editable ? 'text' : 'default',
outlineColor: editable ? '' : 'transparent'
}}
Expand Down Expand Up @@ -78,7 +81,13 @@ export const Cedit: React.FC<CeditProps> = ({
}}
onInput={event => onChange(get(event))}
onKeyUp={event => onKeyUp(get(event))}
onKeyDown={event => onKeyDown(get(event))}
onKeyDown={event => {
if (event.key === 'Enter' && !multiLine) {
event.preventDefault()
}

onKeyDown(get(event))
}}
onKeyPress={event => onKeyPress(get(event))}
onBlur={event => {
contentRef.current.editable = false
Expand Down
4 changes: 3 additions & 1 deletion src/provider.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React, { useEffect, useRef } from 'react'
import React, { createContext, useEffect, useRef } from 'react'

export const CeditContext = createContext({})

export const CeditProvider: React.FC = ({ children }) => {
const ref = useRef<HTMLDivElement | null>(null)
Expand Down
4 changes: 2 additions & 2 deletions src/styled.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
padding: 2px 4px;
border-radius: 4px;
min-height: 80px;
transition: border 0.3s;
transition: 0.3s;

&:hover {
border-color: #70a1ff;
Expand All @@ -77,6 +77,6 @@
position: relative;
content: attr(placeholder);
background-color: transparent !important;
color: #8e8e93;
opacity: 0.45;
}
}
2 changes: 2 additions & 0 deletions src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,12 @@ export type CeditProps = {
value: string
spellCheck?: boolean
editable?: boolean
multiLine?: boolean
className?: string
placeholder?: string
autoFocus?: boolean
placement?: keyof typeof PLACEMENT
style?: React.CSSProperties
onKeyUp?(data: Maybe<'key'>): void
onKeyDown?(data: Maybe<'key'>): void
onKeyPress?(data: Maybe<'key'>): void
Expand Down
2 changes: 0 additions & 2 deletions src/useCedit.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import React from 'react'

import { caretRangeFromPoint } from './utils'
import { Events, Maybe } from './types'

Expand Down
Loading

0 comments on commit 97ef47d

Please sign in to comment.