New features
RichText Inline Mode
This past week we released `Inline` mode in `v0.10.0` of `@makeswift/runtime`. `Inline` mode is a configuration option for `RichText` that allows you to edit text without affecting styles or HTML structure. It's great for editing the content of inline elements like buttons and links, and prevents you from creating hydration mismatch errors.
While implementing `Inline` mode, we reworked the architecture of the `RichText` control so that real-time collaboration is faster and rapid changes like holding `undo` are more performant.
To switch between `Block` and `Inline` mode, change your component registration like so:
ReactRuntime.registerComponent(Component, {
type: 'component',
label: 'Component',
props: {
- text: RichText(),
+ text: RichText({
+ mode: RichText.Mode.Inline,
+ }),
},
})Upgrading Text components
Under the hood, the `Text` component that ships with all sites uses the `RichText` control. After upgrading to `v0.10.0` and selecting a `Text` component, you'll be prompted to update the component in the right sidebar.
This update migrates data and renders the new version of the `Text` component with some small visual changes:
- In the past, `white-space-collapse: preserve` was used in `Text` components within Makeswift, but `white-space-collapse: collapse` was used in live sites. The new `Text` component uses `preserve` in both versions.
- In the past, setting "Text align" on a ''Numbered list" or "Bulleted list" had no effect. The `text-align` property will now apply. If you don't like this change you can simply reset the "Text align" panel in the right sidebar.
- In the past, the default `list-style` and `padding-inline-start` values could be overridden by CSS resets like tailwind's. This could lead to a confusing editing experience when creating nested lists. We added some opinionated CSS to prevent the default `list-style` property from being reset and also decreased the default `padding-inline-start` to `20px`.
We have tested the upgrade extensively, but if you do see any changes other than the three listed above simply "cmd/ctrl + z" and reach out to us in Discord.
improvements & fixes
- Added `h4`, `h5`, and `h6` block types to the upgraded `RichText` control.
- Fixed visually misaligned loading state in the site selector.
- Fixed a client-side error that was happening for sites using the default renderer with very old data.
- Updated the placeholder for the preview URL in the host settings to match our current API.
- Fixed a bug where pages falsely had the status of "published" when they were first created.
- Fixed a visual bug where the Element Id input didn't look editable in the right sidebar.
- Fixed a bug that could occur when creating a page from a template.
- Fixed a visual bug where the width value of a newly dropped component didn't match the default value in the sidebar.
- Updated list styles to prevent CSS resets from overriding them.
Go ahead and build.
Don't have a Next.js project yet? Get started with our no code builder and extend when you're ready.
