From 2ab9a7a66f556af6b6589c4c5ad6280a8acc67c8 Mon Sep 17 00:00:00 2001 From: Ju Nogueira Date: Wed, 19 Apr 2023 15:45:26 -0300 Subject: [PATCH 01/29] fix: add status icon --- packages/react-notion-x/src/icons/property-icon.tsx | 2 ++ packages/react-notion-x/src/icons/type-status.svg | 11 +++++++++++ packages/react-notion-x/src/icons/type-status.tsx | 11 +++++++++++ 3 files changed, 24 insertions(+) create mode 100644 packages/react-notion-x/src/icons/type-status.svg create mode 100644 packages/react-notion-x/src/icons/type-status.tsx diff --git a/packages/react-notion-x/src/icons/property-icon.tsx b/packages/react-notion-x/src/icons/property-icon.tsx index 5934e51bc..2e3981a3d 100644 --- a/packages/react-notion-x/src/icons/property-icon.tsx +++ b/packages/react-notion-x/src/icons/property-icon.tsx @@ -14,6 +14,7 @@ import Person2Icon from './type-person-2' import PhoneNumberIcon from './type-phone-number' import RelationIcon from './type-relation' import SelectIcon from './type-select' +import StatusIcon from './type-status' import TextIcon from './type-text' import TimestampIcon from './type-timestamp' import TitleIcon from './type-title' @@ -29,6 +30,7 @@ const iconMap = { text: TextIcon, number: NumberIcon, select: SelectIcon, + status: StatusIcon, multi_select: MultiSelectIcon, date: DateIcon, person: PersonIcon, diff --git a/packages/react-notion-x/src/icons/type-status.svg b/packages/react-notion-x/src/icons/type-status.svg new file mode 100644 index 000000000..e3605f3e8 --- /dev/null +++ b/packages/react-notion-x/src/icons/type-status.svg @@ -0,0 +1,11 @@ + + + + diff --git a/packages/react-notion-x/src/icons/type-status.tsx b/packages/react-notion-x/src/icons/type-status.tsx new file mode 100644 index 000000000..67d42755f --- /dev/null +++ b/packages/react-notion-x/src/icons/type-status.tsx @@ -0,0 +1,11 @@ +import * as React from 'react' + +function SvgTypeStatus(props: React.SVGProps) { + return ( + + + + ) +} + +export default SvgTypeStatus From c9a57052a7fecb2ef16af0e9b26eb186f8029b4d Mon Sep 17 00:00:00 2001 From: Ju Nogueira Date: Wed, 19 Apr 2023 19:27:52 -0300 Subject: [PATCH 02/29] fix: show reminder date and time --- packages/react-notion-x/src/components/text.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/react-notion-x/src/components/text.tsx b/packages/react-notion-x/src/components/text.tsx index 0f75331df..19dc2c9e4 100644 --- a/packages/react-notion-x/src/components/text.tsx +++ b/packages/react-notion-x/src/components/text.tsx @@ -191,6 +191,12 @@ export const Text: React.FC<{ const startDate = v.start_date return formatDate(startDate) + } else if (type === 'datetime') { + // Example: Jul 31, 2010 20:00 + const startDate = v.start_date + const startTime = v.start_time + + return `${formatDate(startDate)} ${startTime}` } else if (type === 'daterange') { // Example: Jul 31, 2010 → Jul 31, 2020 const startDate = v.start_date From a7447b08d3431d1b8760c5875adf878b2a3d84fc Mon Sep 17 00:00:00 2001 From: Ju Nogueira Date: Sat, 22 Apr 2023 16:16:32 -0300 Subject: [PATCH 03/29] fix: style status property values --- packages/notion-types/src/core.ts | 1 + packages/react-notion-x/src/styles.css | 97 ++++++++++++++++--- .../src/third-party/property.tsx | 39 ++++++++ 3 files changed, 125 insertions(+), 12 deletions(-) diff --git a/packages/notion-types/src/core.ts b/packages/notion-types/src/core.ts index 5f0c16e7d..fac587474 100644 --- a/packages/notion-types/src/core.ts +++ b/packages/notion-types/src/core.ts @@ -43,6 +43,7 @@ export type PropertyType = | 'text' | 'number' | 'select' + | 'status' | 'multi_select' | 'date' | 'person' diff --git a/packages/react-notion-x/src/styles.css b/packages/react-notion-x/src/styles.css index 71b8b4a8a..402784e84 100644 --- a/packages/react-notion-x/src/styles.css +++ b/packages/react-notion-x/src/styles.css @@ -51,16 +51,38 @@ --notion-brown_background_co: rgba(233, 229, 227, 0.3); --notion-gray_background_co: rgba(235, 236, 237, 0.3); - --notion-item-blue: rgba(0, 120, 223, 0.2); - --notion-item-orange: rgba(245, 93, 0, 0.2); - --notion-item-green: rgba(0, 135, 107, 0.2); - --notion-item-pink: rgba(221, 0, 129, 0.2); - --notion-item-brown: rgba(140, 46, 0, 0.2); - --notion-item-red: rgba(255, 0, 26, 0.2); - --notion-item-yellow: rgba(233, 168, 0, 0.2); - --notion-item-default: rgba(206, 205, 202, 0.5); - --notion-item-purple: rgba(103, 36, 222, 0.2); - --notion-item-gray: rgba(155, 154, 151, 0.4); + --notion-item-blue: rgb(211, 229, 239); + --notion-item-orange: rgb(250, 222, 201); + --notion-item-green: rgb(219, 237, 219); + --notion-item-pink: rgb(245, 224, 233); + --notion-item-brown: rgb(238, 224, 218); + --notion-item-red: rgb(255, 226, 221); + --notion-item-yellow: rgb(253, 236, 200); + --notion-item-default: rgba(227, 226, 224, 0.5); + --notion-item-purple: rgb(232, 222, 238); + --notion-item-gray: rgb(227, 226, 224); + + --notion-item-text-blue: rgb(24, 51, 71); + --notion-item-text-orange: rgb(73, 41, 14); + --notion-item-text-green: rgb(28, 56, 41); + --notion-item-text-pink: rgb(76, 35, 55); + --notion-item-text-brown: rgb(68, 42, 30); + --notion-item-text-red: rgb(93, 23, 21); + --notion-item-text-yellow: rgb(64, 44, 27); + --notion-item-text-default: rgb(50, 48, 44); + --notion-item-text-purple: rgb(65, 36, 84); + --notion-item-text-gray: rgb(50, 48, 44); + + --notion-item-bullet-blue: rgb(91, 151, 189); + --notion-item-bullet-orange: rgb(215, 129, 58); + --notion-item-bullet-green: rgb(108, 155, 125); + --notion-item-bullet-pink: rgb(205, 116, 159); + --notion-item-bullet-brown: rgb(187, 132, 108); + --notion-item-bullet-red: rgb(225, 111, 100); + --notion-item-bullet-yellow: rgb(203, 148, 51); + --notion-item-bullet-default: rgb(91, 151, 189); + --notion-item-bullet-purple: rgb(167, 130, 195); + --notion-item-bullet-gray: rgb(145, 145, 142); --notion-max-width: 720px; --notion-header-height: 45px; @@ -371,33 +393,78 @@ .notion-item-blue { background-color: var(--notion-item-blue); + color: var(--notion-item-text-blue); } .notion-item-orange { background-color: var(--notion-item-orange); + color: var(--notion-item-text-orange); } .notion-item-green { background-color: var(--notion-item-green); + color: var(--notion-item-text-green); } .notion-item-pink { background-color: var(--notion-item-pink); + color: var(--notion-item-text-pink); } .notion-item-brown { background-color: var(--notion-item-brown); + color: var(--notion-item-text-brown); } .notion-item-red { background-color: var(--notion-item-red); + color: var(--notion-item-text-red); } .notion-item-yellow { background-color: var(--notion-item-yellow); + color: var(--notion-item-text-yellow); } -.notion-item-default { +.notion-item-default, +.notion-item-default-inferred { background-color: var(--notion-item-default); + color: var(--notion-item-text-default); } .notion-item-purple { background-color: var(--notion-item-purple); + color: var(--notion-item-text-purple); } .notion-item-gray { background-color: var(--notion-item-gray); + color: var(--notion-item-text-gray); +} + +.notion-item-bullet-blue { + background-color: var(--notion-item-bullet-blue); +} +.notion-item-bullet-orange { + background-color: var(--notion-item-bullet-orange); +} +.notion-item-bullet-green { + background-color: var(--notion-item-bullet-green); +} +.notion-item-bullet-pink { + background-color: var(--notion-item-bullet-pink); +} +.notion-item-bullet-brown { + background-color: var(--notion-item-bullet-brown); +} +.notion-item-bullet-red { + background-color: var(--notion-item-bullet-red); +} +.notion-item-bullet-yellow { + background-color: var(--notion-item-bullet-yellow); +} +.notion-item-bullet-default { + background-color: var(--notion-item-bullet-default); +} +.notion-item-bullet-default-inferred { + background-color: var(--notion-item-bullet-gray); +} +.notion-item-bullet-purple { + background-color: var(--notion-item-bullet-purple); +} +.notion-item-bullet-gray { + background-color: var(--notion-item-bullet-gray); } .notion b { @@ -1343,6 +1410,7 @@ svg.notion-page-icon { } .notion-property-select, +.notion-property-status, .notion-property-multi_select { display: flex; flex-wrap: wrap; @@ -1350,18 +1418,23 @@ svg.notion-page-icon { } .notion-property-select-item, +.notion-property-status-item, .notion-property-multi_select-item { display: flex; align-items: center; padding: 0 6px; border-radius: 3px; - height: 18px; + height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 120%; } +.notion-property-status-item { + border-radius: 20px; +} + .notion-property-file { display: flex; flex-wrap: wrap; diff --git a/packages/react-notion-x/src/third-party/property.tsx b/packages/react-notion-x/src/third-party/property.tsx index 04158d58c..5ef8f6fa2 100644 --- a/packages/react-notion-x/src/third-party/property.tsx +++ b/packages/react-notion-x/src/third-party/property.tsx @@ -327,6 +327,45 @@ export const PropertyImpl: React.FC = (props) => { content = components.propertyTitleValue(props, renderTitleValue) break + case 'status': { + const value = data[0][0] || '' + + const option = schema.options?.find((option) => value === option.value) + + const color = option?.color || 'default-inferred' + + content = components.propertySelectValue( + { + ...props, + value, + option, + color + }, + () => ( +
+ + {value} +
+ ) + ) + break + } + case 'select': // intentional fallthrough case 'multi_select': { From cb08feb12eeafc3e40c55e3f4f53d45447f986a2 Mon Sep 17 00:00:00 2001 From: Ju Nogueira Date: Sat, 29 Apr 2023 18:20:23 -0300 Subject: [PATCH 04/29] fix: board view when grouped by status --- .../react-notion-x/src/third-party/collection-view-board.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-notion-x/src/third-party/collection-view-board.tsx b/packages/react-notion-x/src/third-party/collection-view-board.tsx index 3f7bd0c1d..1cce1f16f 100644 --- a/packages/react-notion-x/src/third-party/collection-view-board.tsx +++ b/packages/react-notion-x/src/third-party/collection-view-board.tsx @@ -104,7 +104,9 @@ function Board({ collectionView, collectionData, collection, padding }) { {group.value?.value ? ( ) : ( From 58dad3df857b2d3db5bcc5bc2cbf6fe14a134016 Mon Sep 17 00:00:00 2001 From: Ju Nogueira Date: Sat, 29 Apr 2023 21:01:24 -0300 Subject: [PATCH 05/29] fix: board view when grouped by status group instead of status option --- .../src/third-party/collection-view-board.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/react-notion-x/src/third-party/collection-view-board.tsx b/packages/react-notion-x/src/third-party/collection-view-board.tsx index 1cce1f16f..ef461f093 100644 --- a/packages/react-notion-x/src/third-party/collection-view-board.tsx +++ b/packages/react-notion-x/src/third-party/collection-view-board.tsx @@ -66,6 +66,8 @@ function Board({ collectionView, collectionData, collection, padding }) { collectionView?.format?.board_groups2 || [] + const boardGroupBy = collectionView?.format?.board_columns_by?.groupBy + const boardStyle = React.useMemo( () => ({ paddingLeft: padding @@ -105,7 +107,10 @@ function Board({ collectionView, collectionData, collection, padding }) { From 131ebb3cd904c9458dea607f60be5ab12f88c333 Mon Sep 17 00:00:00 2001 From: J Date: Mon, 22 May 2023 14:54:12 +0800 Subject: [PATCH 06/29] fix: the notion-external-mention svg icon is displayed abnormally on Safari --- packages/react-notion-x/src/styles.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/react-notion-x/src/styles.css b/packages/react-notion-x/src/styles.css index 71b8b4a8a..d443a1d3c 100644 --- a/packages/react-notion-x/src/styles.css +++ b/packages/react-notion-x/src/styles.css @@ -2623,6 +2623,11 @@ svg.notion-page-icon { margin-right: 0.3em; } +.notion-external-mention .notion-external-image svg { + width: 100%; + height: 100%; +} + .notion-external-description { display: flex; flex-direction: column; From 7aa5d0e2340bb6df2ad6476c4ef72558364d49d0 Mon Sep 17 00:00:00 2001 From: J Date: Wed, 31 May 2023 01:56:30 +0800 Subject: [PATCH 07/29] fix: mention-preview-card --- .../react-notion-x/src/components/eoi.tsx | 13 ++-- .../src/components/mention-preview-card.tsx | 53 ++++++++++++++++ packages/react-notion-x/src/styles.css | 60 +++++++++++++++++++ 3 files changed, 121 insertions(+), 5 deletions(-) create mode 100644 packages/react-notion-x/src/components/mention-preview-card.tsx diff --git a/packages/react-notion-x/src/components/eoi.tsx b/packages/react-notion-x/src/components/eoi.tsx index e47f783f4..d5684e850 100644 --- a/packages/react-notion-x/src/components/eoi.tsx +++ b/packages/react-notion-x/src/components/eoi.tsx @@ -5,6 +5,7 @@ import { Block } from 'notion-types' import { useNotionContext } from '../context' import SvgTypeGitHub from '../icons/type-github' import { cs, formatNotionDateTime } from '../utils' +import { MentionPreviewCard } from './mention-preview-card' // External Object Instance export const EOI: React.FC<{ @@ -64,11 +65,13 @@ export const EOI: React.FC<{
{title}
{(owner || lastUpdated) && ( -
- {owner && {owner}} - {owner && lastUpdated && • } - {lastUpdated && Updated {lastUpdated}} -
+ )} diff --git a/packages/react-notion-x/src/components/mention-preview-card.tsx b/packages/react-notion-x/src/components/mention-preview-card.tsx new file mode 100644 index 000000000..6bcb777a0 --- /dev/null +++ b/packages/react-notion-x/src/components/mention-preview-card.tsx @@ -0,0 +1,53 @@ +import React from 'react' + +function capitalizeFirstLetter(str) { + return str.charAt(0).toUpperCase() + str.slice(1) +} + +export const MentionPreviewCard: React.FC<{ + owner?: string + lastUpdated?: string + title: string + domain: string + externalImage?: React.ReactNode +}> = ({ owner, lastUpdated, externalImage, title, domain }) => { + return ( +
+ {externalImage && ( +
+
{externalImage}
+
+ {capitalizeFirstLetter(domain.split('.')[0])} +
+
+ )} +
{title}
+ {owner && ( +
+
Owner
+ {owner} +
+ )} + {lastUpdated && ( +
+
Updated
+ + {lastUpdated} + +
+ )} + {domain === 'github.com' && ( +
+ + +
+ )} +
+ ) +} diff --git a/packages/react-notion-x/src/styles.css b/packages/react-notion-x/src/styles.css index d443a1d3c..38e05c7a4 100644 --- a/packages/react-notion-x/src/styles.css +++ b/packages/react-notion-x/src/styles.css @@ -2658,6 +2658,66 @@ svg.notion-page-icon { .notion-external-mention .notion-external-subtitle { display: none; + position: absolute; + top: 28px; + left: 0; + width: 260px; + background: var(--bg-color); + z-index: 999; + padding: 8px; + box-shadow: rgba(15, 15, 15, 0.1) 0 0 0 1px, rgba(15, 15, 15, 0.1) 0 2px 4px; +} + +.notion-external-mention .notion-external-subtitle-item{ + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + line-height: 1.5; + padding: 4px 0; +} + +.notion-external-mention .notion-external-subtitle-item-name{ + flex: none; + width: 70px; + font-weight: 500; +} + +.notion-external-mention .notion-external-subtitle-item-desc{ + flex: 1 +} + +.notion-external-description:hover .notion-external-subtitle { + display: block; +} + +.notion-preview-card-domain-warp{ + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; +} + +.notion-preview-card-domain-warp .notion-preview-card-domain{ +padding-left: 4px; + +} +.notion-preview-card-domain-warp .notion-preview-card-logo{ + width: 14px; + height: 14px; +} + +.notion-preview-card-title{ + font-size: 16px; + line-height: 1.5; + padding: 4px 0; + font-weight: 500; + color: var(--fg-color-4); +} + +.notion-preview-card-github-shields img { + margin-right: 4px; + padding: 4px 0; } .notion-yt-lite { From 89d1fca8f5c9c836fd9909550ab53897b45af44d Mon Sep 17 00:00:00 2001 From: Sanjib Date: Sun, 4 Jun 2023 17:23:48 +0530 Subject: [PATCH 08/29] setting app-element in react-modal Modal component --- packages/react-notion-x/src/components/search-dialog.tsx | 2 -- packages/react-notion-x/src/third-party/modal.tsx | 2 ++ 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-notion-x/src/components/search-dialog.tsx b/packages/react-notion-x/src/components/search-dialog.tsx index 38b2e5aca..95be53581 100644 --- a/packages/react-notion-x/src/components/search-dialog.tsx +++ b/packages/react-notion-x/src/components/search-dialog.tsx @@ -11,8 +11,6 @@ import { SearchIcon } from '../icons/search-icon' import { cs } from '../utils' import { PageTitle } from './page-title' -// TODO: modal.default.setAppElement('.notion-viewport') - export class SearchDialog extends React.Component<{ isOpen: boolean rootBlockId: string diff --git a/packages/react-notion-x/src/third-party/modal.tsx b/packages/react-notion-x/src/third-party/modal.tsx index 3d320b377..07d5749ca 100644 --- a/packages/react-notion-x/src/third-party/modal.tsx +++ b/packages/react-notion-x/src/third-party/modal.tsx @@ -1,3 +1,5 @@ import Modal from 'react-modal' +Modal.setAppElement('.notion-frame') + export { Modal } From bcfb086bbbeb1151ac6d9b29b2980dac12bc3600 Mon Sep 17 00:00:00 2001 From: Sanjib Date: Sun, 4 Jun 2023 18:32:17 +0530 Subject: [PATCH 09/29] fix: time for firefox and safari browser --- packages/notion-utils/src/format-notion-date-time.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/notion-utils/src/format-notion-date-time.ts b/packages/notion-utils/src/format-notion-date-time.ts index 84baeda52..16f98da56 100644 --- a/packages/notion-utils/src/format-notion-date-time.ts +++ b/packages/notion-utils/src/format-notion-date-time.ts @@ -8,8 +8,9 @@ export interface NotionDateTime { } export const formatNotionDateTime = (datetime: NotionDateTime) => { - const dateString = `${datetime.start_time || ''} ${datetime.start_date} ${ - datetime.time_zone || '' - }` + // Adding +00:00 preserve the time in UTC. + const dateString = `${datetime.start_date}T${ + datetime.start_time || '00:00' + }+00:00` return formatDate(dateString) } From 2a6877aca69f1ff3a2523a9d499ade3c362c3720 Mon Sep 17 00:00:00 2001 From: Sanjib Date: Sun, 4 Jun 2023 19:32:36 +0530 Subject: [PATCH 10/29] fixed typeform auto focus issue --- packages/react-notion-x/src/components/asset.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-notion-x/src/components/asset.tsx b/packages/react-notion-x/src/components/asset.tsx index bbbea8f4b..5628f87d1 100644 --- a/packages/react-notion-x/src/components/asset.tsx +++ b/packages/react-notion-x/src/components/asset.tsx @@ -239,6 +239,8 @@ export const Asset: React.FC<{ /> ) } else { + src += block.type === 'typeform' ? '&disable-auto-focus=true' : '' + content = (