- `yarn start:dev` was failing with `error:0308010C:digital envelope routines::unsupported` without the `--openssl-legacy-provider` option on Node 18. Currently react-scripts@4.x doesn't support Node 18, so until we upgrade to use react-scripts@5.x we'll need to pass in this change for build scripts
refs https://github.com/TryGhost/Team/issues/2221
- added guard to `formatNumber` helper used in the `<Count>` component via the `<ContentTitle>` component so a missing count prop is handled gracefully
- Changed all borders to work better in different background colours
- Same goes for main buttons like pagination for main and reply
- Same goes for any secondary text which should help
no issue
refs https://github.com/TryGhost/Team/issues/1780
This commit adds some Cypress tests as a POC to the project. If we decide to go with Cypress, we can add more tests to cover the rest of the codebase. The main reason to have a E2E framework is that some editor related UI is hard to test with the React tests because it uses JSDOM.
no issue
When the state of a comment changes (e.g., after a like) the relative time would update. This is not desirable because it looks glitchy. If the relative time doesn't update every second, then it is better to never update it after the initial render.
ref https://github.com/TryGhost/Team/issues/1772
- all references of "Bio" to "Expertise" for Comments
- this commit is a breaking change as it relies on the API that returns `expertise` instead of `bio`.
refs https://github.com/TryGhost/Team/issues/1858
- PopupBox better reflects that it contains a Popup and is not a Popup
- In line with ContentBox, that contains the iframe with the comments content
refs https://github.com/TryGhost/Team/issues/1858
fixes https://github.com/TryGhost/Team/issues/1789
- Split up the Comment component in many small Components to make it easier to read and maintain
- Added support for synchronous actions, which are required for actions that affect the context state based on the current value (e.g., increasing a value by one) because of the asynchronous nature of setState:
Before this change
```
// Context state: {hello: 0};
dispatchAction('increaseHelloByOne')
dispatchAction('increaseHelloByOne')
```
Could end up having a state `{hello: 1}` instead of the expected `{hello: 2}`, because underlying this would resolve into:
```
// Context state: {hello: 0};
const hello = {hello: 0};
setState({hello: hello + 1});
setState({hello: hello + 1});
```
Instead of
```
// Context state: {hello: 0};
setState(({hello}) => {hello: hello + 1});
setState(({hello}) => {hello: hello + 1});
```
Synchronous actions now support this.
- Removed deprecated `onAction` context state function
- Replaced the boolean based form checking by the more reliable counter based checking that uses synchronous actions (reason we needed synchronous actions) (fixes https://github.com/TryGhost/Team/issues/1789)
- Prevent creating a new `dispatchAction` function every time the context state changes, by using bind. This prevents infinte updates in `useEffect` hooks that depend on `dispatchAction` and also update the context via actions.
refs https://ghost.slack.com/archives/C02G9E68C/p1660323308235919
- When opening and closing a popup very fast, it will stay in DOM, blocking all pointer events.
- The Headless UI component <Transition show={show}> is not removed from DOM when show is set to true, and false very fast
- Fixed this by forcing a popup to get removed from DOM after 250ms after is has been closed.
- Updated HeadlessUI version
- Moved testing packges to dev dependencies
refs https://github.com/TryGhost/Team/issues/1723
- Moved usage from likes_count to count.likes
- Implemented real reply pagination based by an ID filter
- The backend now returns the relations correctly when creating new comments, so we don't need to fix them any longer.
refs https://github.com/TryGhost/Team/issues/1763
We still need to use the pagination for the other checks because these
are based on how many comments are visible, which includes deleted or
hidden comments.
By using the /comments/count API we ensure that any changes to the
calculation of comments is replicated by both the comment_count
helper, as well as the comments-ui
- Added in a new line for further explanation
- Adjusted various text sizes and spacings
- Put back in the bottom border
- Currently has a hardcoded publication name for wiring up
refs https://github.com/TryGhost/Team/issues/1754
- After some trying things out, just removed that now
- There should be no more bottom spacing apart from what's in the iFrame now
refs https://github.com/TryGhost/Team/issues/1747
- There were left over paddings that were present with old design
- Stripping back the paddings to have better placement in more themes without adjustment
refs https://github.com/TryGhost/Team/issues/1747
- This changes the behaviour of the Avatar component to show the icon properly
- This removes a parameter from the Avatar component
refs https://github.com/TryGhost/Team/issues/1746
- This replaces the A that showed which was a bit confusing
- Icon may still change but it feels better than what was there before
- Added new parameter for Avatar component for Blank and Anonymous
refs https://github.com/TryGhost/Team/issues/1746
- Removed only showing bio in modal, now showing both always
- Changed how the modal is called with parameters to focus on bio if clicked
refs https://github.com/TryGhost/Team/issues/1716
- This adds in the bio UI into the modal
- Adds in a simple button for bio under the name in textbox
- Still needs wiring up as it data doesn't save and update yet
refs https://github.com/TryGhost/Team/issues/1716
fixes https://github.com/TryGhost/Team/issues/1725
- ESC to close/blur forms
- CMD + ESC to submit forms
- C to focus and scroll to main comment form
- ESC to close any modals (context menus or dialogs)
- keydown events are passed down from iframes to the main window to prevent having to listen on all iframes + window every time we need these events.
fixes https://github.com/TryGhost/Team/issues/1729
refs https://github.com/TryGhost/Team/issues/1730
Please note that it only works on initial page load for now. Browsers have custom implementations for handling URL hashes/fragments that mess with the scroll position if you reload a page.
We need a special JS based handling of the URL fragment/hash because:
- We should only scroll after the comments have loaded, else we risk landing on a higher position on the page due to content height changes.
- The DIV we scroll to (#ghost-comments-root) is inserted via JS, making it more difficult to scroll to it without JS.
- We cannot wrap the `<script>` tag that loads the comments with a different DIV that has an id where we can scroll to. This would break themes and would make it harder to work with existing CSS grids (tried this first). And we still have the first issue too if we use this.
refs https://github.com/TryGhost/Team/issues/1695
We should allow for an empty string to be passed in as the title,
which means a boolean coercion check is not appropriate, we should
check for null which in this case means to use the default title
no issue
- typography and spacing was a bit off in the signup / upgrade CTA boxes
- the line style was inconsistent with the rest of the comments design
- button sizes and spacings needed also a bit of refinement
no issue
- applied typography changes to bio and date line as they were too strong
- padding and positioning of the comment input form was a bit misaligned
- Before it was static, with an X, but now using the variable available
- Do note, this doesn't seem to be showing the right number
refs https://github.com/TryGhost/Team/issues/1695
refs https://github.com/TryGhost/Team/issues/1710
- if a user is already editing/replying a comment, we shouldn't show other text boxes they can edit as it can be generally confusing
- This removes the global styles on the iFrame
- Changes to comment layout for new bio, new position for date and edited tag
- Lots of design tweaks for desktop and mobile
refs https://github.com/TryGhost/Team/issues/1716
refs https://github.com/TryGhost/Team/issues/1719
- the stylesheet link was prev hardcoded in the app, which made it impossible to configure from Ghost
- fetches styles url from the data attribute on script instead, which allows app to load styles based on config upstream
refs https://github.com/TryGhost/Team/issues/1710
Was caused by: mouseDown triggered on Reply button -> editor blurred -> editor closed itself -> onClick on reply opened the form again
- The blank avatar needed some work in dark mode and removed bits from svg file
- Added in some hover states for the pagination buttons
refs https://github.com/TryGhost/Team/issues/1703
- Note this may look a bit more complicated but I need more control over opening/closing
- Will look to refactor this and make it simpler soon enough
refs https://github.com/TryGhost/Team/issues/1703
- Includes more dynamic styling for negative margins for iFrames
- This may well change again when looking more closely with themes
refs https://github.com/TryGhost/Team/issues/1701
refs https://github.com/TryGhost/Team/issues/1701
The Selection API is missing in Safari in Shadow DOM: https://bugs.webkit.org/show_bug.cgi?id=163921. So we need to move away from it for now.
- Adds a new component: Modal, which makes sure we can style modals using tailwind, while displaying them outside of the main iframe (inside a different iframe that is positioned fixed)
- Updated GenericDialog to use the new Modal component
- Removed ShadowDOM
- Now doesn't jump when opening the Add Name dialog box
- Still some minor things to visually tweak on this but it's an improvement
refs https://github.com/TryGhost/Team/issues/1682
- This modal style is mostly there
- It needs key behaviours to work with React properly
- It triggers only when there isn't a name present
- It doesn't save yet or anything fancy
refs https://github.com/TryGhost/Team/issues/1682
refs https://github.com/TryGhost/Team/issues/1696
- Wait for the iframe to load before sending messages to it
- High chance this fixes the issue, but still need to monitor if this was the real cause.
refs https://github.com/TryGhost/Team/issues/1692
- Moved Loading component to App (so it shows as a placeholder)
- Disabled loading settings from the API (not used for now), to speed up loading
refs https://github.com/TryGhost/Team/issues/1693
- Added a new data attribute to the injected stript tag: `data-comments-enabled`. This contains the commentsEnabled setting, and can be 'all' or 'paid' (when it is off the comments section is never injected).
- Added a new component `<NotPaidBox>`, which is visible when a member is signed in but doesn't have paid access to comment
- Prevented clicking the reply and like buttons when a member doesn't have access
- New loader component for when comments come in
- New spinner used for loader and the report button progress
- We don't seem to have a working loading state to show it though
refs https://github.com/TryGhost/Team/issues/1692
refs https://github.com/TryGhost/Team/issues/1675
- the main css file was imported in the root js script, causing it to be included alongside the final minified bundle and get injected outside the iframe.
- the main css is pushed as a separate file outside of bundle and used directly as link inside the iframe instead
- Loading CSS from external source might take time which can result in
content appearing for a split-second without any formatting. To avoid
this, we added a CSS class that hides all content until the CSS is
properly loaded.
